import React, { useEffect } from 'react'
import hljs from "highlight.js"
import { copyText } from "./indexCopy"
interface PROPS {
  html: string
}
export default function Markdown(props: PROPS) {
  useEffect(() => {
    const codeDomlst = document.querySelectorAll('pre code')
    // console.log(codeDomlst)
    codeDomlst.forEach((codeDom: any) => {
      //复制及高亮
      codeDom.classList.add("hljs")
      codeDom.style.position = "relative"
      const text = codeDom.innerText
      console.log(text)
      const highlightedCode = hljs.highlight(text, { language: 'javascript' }).value
      console.log(highlightedCode)
      codeDom.innerHtml = highlightedCode
      const copyBtn = document.createElement("span");
      copyBtn.classList.add("copy-btn")
      codeDom.appendChild(copyBtn)
      copyBtn.innerText = "复制"
      copyBtn.onclick=()=>{copyText(text)}
    })
  }, [props.html])
  return (
    <div>
      <div className="c-html-render" dangerouslySetInnerHTML={{ __html: props.html }}></div>
    </div>
  )
}
